Page({
  data: {
    tabs: [{
      name: "体验问题",
      id: 0,
      isActive: true
    }, {
      name: "商品、商家投诉",
      id: 1,
      isActive: false
    }],
    // 用户已经选择的图片路径数组
    choosedImages: [],
    // 用户在文本域中输入的内容
    textValue: ""
  },
  // 定义一个全局的变量uploadImages数组，用来放上传图片的外网地址
  uploadImages: [],
  // tabs栏位切换事件 从子组件传递值过来
  bindReceiveIndex(e) {
    // console.log(e);
    const index = e.detail
    // console.log(index);
    const tabs = this.data.tabs
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
    this.setData({
      tabs
    })
  },
  // 当用户点击了加号按钮选择图片的时候触发
  handleChooseImg() {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        console.log(result.tempFilePaths);
        // 把用户选择的图片路径数组赋值给data中的choosedImages
        this.setData({
          choosedImages: [...this.data.choosedImages, ...result.tempFilePaths]
        })
      }
    });

  },
  // 当用户点击了自定义图片组件的时候触发删除操作
  handleRemoveImage(e) {
    // console.log(e);
    // 获取被点击图片的索引
    const { index } = e.currentTarget.dataset
    console.log(index);
    // 获取到图片数组
    let choosedImages = this.data.choosedImages
    // 使用splice方法删除
    choosedImages.splice(index, 1)
    // 把图片数组重新的设置到data中
    this.setData({
      choosedImages
    })
  },
  // 监听文本域中的输入的内容
  handleInput(e) {
    // console.log(e);
    const { value } = e.detail
    // console.log(value);
    this.setData({
      textValue: value
    })
  },
  // 当用户点击了提交按钮的时候触发
  handleSubmit() {
    const { textValue, choosedImages } = this.data;
    // 对文本域中的内容进行合法性的验证
    if (!textValue.trim()) {
      // 验证不合法
      wx.showToast({
        title: '请输入内容',
        icon: 'none',
        mask: true
      });
      // 阻止代码向下执行
      return
    }
    // 验证通过，把图片数组上传到搜狗图床上生成图片的外网链接，这个uploadFile方法不能同时多张上传，只能一张一张的来，所以我们要遍历循环数组来上传；
    // choosedImages.forEach((v, i) => {
    //   wx.uploadFile({
    //     // 图片要上传到哪里
    //     url: 'https://imgurl.org',
    //     // 上传图片的本地路径
    //     filePath: v,
    //     // 上传图片的名称 后台用来获取文件 file
    //     name: "file",
    //     // 顺带的文本信息
    //     formData: {},
    //     success: (result) => {
    //       console.log(result);
    //       const url = JSON.parse(result.data).url
    //       console.log(url);
    //       this.uploadImages.push(url)
    //       console.log(this.uploadImages);
    //       // 如果图片全部上传完毕之后，才可以发送请求
    //       if (i === choosedImages.length) {
    //         console.log("发送请求把文本的内容和外网的图片数组 提交到后台中");
    //         // 提交都成功了后把页面重置
    //         this.setData({
    //           textValue: "",
    //           choosedImages: []
    //         })
    //         // 返回上一个页面
    //         wx.navigateBack({
    //           delta: 1
    //         });
    //       }
    //     }
    //   });
    // })

    // 上面的实际操作没法演示了；我们直接认为提交成功了；直接就清空文本框内容和已经选择图片数组；之后返回上一页；
    this.setData({
      textValue: "",
      choosedImages: []
    })
    wx.showLoading({
      title: "正在上传中",
      mask: true,
    });
    wx.hideLoading();
    // 返回上一个页面
    wx.navigateBack({
      delta: 1
    });

  }
})